import { animation } from "../__directives/eet"

/** 动画状态变化的回调事件
 * @callback onemit
 * @param {any} i - 组件实例
 * @param {boolean} value - true: 入动画 / false: 出动画
 * @param {HTMLElement} el - 动画的DOM元素
 * @param {TransitionEvent} [e] - 结束时ontransitionend回调的事件参数
 */

export const emits = {
  /** 动画开始时触发
   * @type {onemit}
   */
  onBegin: (i, value, el) => true,
  /** 动画结束时触发
   * @type {onemit}
   */
  onEnd: (i, value, el, e) => true,
  /** 入动画结束后触发
   * @type {onemit}
   */
  onIn: (i, value, el) => true,
  /** 出动画结束后触发
   * @type {onemit}
   */
  onOut: (i, value, el, e) => true,
}

export const props = {
  /** 是否播放动画使组件可见(true)或不可见(false)
   * @type {boolean}
   */
  appear: {
    type: Boolean,
    default: false,
  },
  /** 动画的class，一般为.eet内定义的动画，需要通过.in来控制
   * 
   * 可以是一个或多个，默认为fade
   * @type {animation | animation[]}
   */
  animation: {
    type: [String, Array],
    default: 'fade',
  },
  /** 原生的z-index属性 */
  zIndex: Number,
}